import { Card, Checkbox, NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
// import React from 'react'
import { loadCartAPI } from "../services/cart";
import { useState, useEffect } from "react";
import { dalImg } from "../utils/tools";
import { SwipeAction, Button, Empty, Toast } from "antd-mobile";
import { QuestionCircleOutline } from "antd-mobile-icons";
import { delFromCartAPI } from "../services/home";

function Wodeguznhu() {
  const nav = useNavigate();
  const back = () => nav(-1);
  const [list, setList] = useState([]);
  const [value, setValue] = useState([]);

  const cartData = async () => {
    const res = await loadCartAPI();
    setList(res.data.list);
  };
  useEffect(() => {
    cartData();
  }, []);
  return (
    <div>
      <NavBar onBack={back}>我的购物车</NavBar>
      <div style={{}}>
        <div>
          {list.length > 1 ? (
            <Checkbox
              style={{ margin: "0 20px", fontSize: "23px" }}
              indeterminate={value.length > 0 && value.length < list.length}
              checked={value.length === list.length}
              onChange={(checked) => {
                if (checked) {
                  setValue(list.map((item) => item.id));
                } else {
                  setValue([]);
                }
              }}
            >
              全选
            </Checkbox>
          ) : (
            ""
          )}
          <span style={{ display: "flex", justifyContent: "end" }}>
            {list.length > 0 ? (
              <Button
                color="danger"
                size="small"
                onClick={() => {
                  if (value.length > 0) {
                    delFromCartAPI(value);
                    history.go(0);
                  }
                }}
              >
                {value.length == list.length ? "全部删除" : "删除选中"}
              </Button>
            ) : (
              ""
            )}
          </span>
          <Checkbox.Group
            value={value}
            onChange={(v) => {
              setValue(v);
            }}
          >
            {list.map((item) => (
              <SwipeAction
                // show
                rightActions={[
                  {
                    key: "delete",
                    text: "删除",
                    color: "danger",
                    onClick: async () => {
                      await delFromCartAPI([item.id]); //删除单个药品
                      Toast.show("删除成功");
                      history.go(0);
                    },
                  },
                ]}
                key={item.medicine.id}
                // style={{ display: "flex" }}

                // delFromCartAPI(item.medicine.id);
              >
                <Card>
                  <Checkbox value={item.id}>
                    <div style={{ display: "flex", alignItems: "center" }}>
                      <img
                        style={{
                          width: "100px",
                          height: "80px",
                          marginLeft: "30px",
                        }}
                        src={dalImg(item.medicine.image)}
                        alt=""
                      />
                      <p style={{ margin: "0 20px", fontSize: "16px" }}>
                        {item.medicine.name}
                      </p>
                      <p>x{item.amount}</p>
                      <p
                        style={{
                          margin: "0 20px",
                          fontSize: "16px",
                          color: "red",
                        }}
                      >
                        {item.price}元
                      </p>
                    </div>
                  </Checkbox>
                </Card>
              </SwipeAction>
            ))}
            {list.length > 0 ? (
              <Button
                style={{ position: "absolute", bottom: "100px", right: "20px" }}
                color="primary"
                size="small"
                onClick={() => {
                  if (value.length > 0) {
                    //
                  }
                }}
              >
                {value.length == list.length ? "全部结算" : "结算选中"}
              </Button>
            ) : (
              ""
            )}
            {list.length < 1 ? (
              <>
                <Empty
                  style={{ padding: "64px 0" }}
                  image={
                    <QuestionCircleOutline
                      style={{
                        color: "var(--adm-color-light)",
                        fontSize: 48,
                      }}
                    />
                  }
                  description="暂无数据"
                />
              </>
            ) : (
              ""
            )}
          </Checkbox.Group>
        </div>
      </div>
    </div>
  );
}

export default Wodeguznhu;
